<template>
	<view class="">
		<view class="top">
			<view style="height: 96rpx;display: flex;
			align-items: center;justify-content: center;">
				<view class="searchview">
					<image src="../../../../../static/phone/phone_search.png" style="width: 32rpx;height: 32rpx;
					margin-left: 32rpx;"></image>
					
					<input type="text" v-model="keyword" 
					placeholder="搜索客户名称/简称" 
					class="placeholder-view"
					confirm-type="search"
					@input="searchPeople"/>
				</view>
			</view>
		</view>
			
		<scroll-view scroll-y="true" :style="{height:windowHeight}" style="margin-top: 96rpx;" v-if="dataList.length>0">
			<!-- <view style="height: 96rpx;"></view> -->
			
			<view v-for="(item,index) in dataList" :key="index" style="padding-left: 32rpx;padding-right: 32rpx;" @click="clickCustomer(item)">
				<view class="item">
					<view class="">
						<view class="item-title">
							<text>{{item.name}}</text>
							<text v-if="item.shortName!=null && item.shortName!=undefined">({{item.shortName}})</text>
							
						</view>
						<view class="item-title2">
							<text v-if="item.categoryDict!=null && item.categoryDict!=undefined">{{item.categoryDict}}</text>
							<text v-if="(item.categoryDict!=null && item.categoryDict!=undefined)&&
								(item.groupDict!=null && item.groupDict!=undefined)">/</text>
							<text v-if="item.groupDict!=null && item.groupDict!=undefined">{{item.groupDict}}</text>
						</view>
					</view>
					<image src="../../../../../static/phone/quxuanze.png" style="width: 12rpx;height: 24rpx;margin-left: auto;"></image>
				</view>
				
			</view>
			
		</scroll-view>
		
		
		<view :style="{height:windowHeight}" v-if="dataList.length==0"
			style="display: flex;align-items: center;justify-content: center;">
			<view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<image :src="no_data" style="width: 300rpx;height: 300rpx;"></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<text style="font-weight: 400;color: #333333;font-size: 28rpx;">暂无数据</text>
				</view>
			</view>
		</view>
		
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="addit">
					新增
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = ''
	export default{
		data(){
			return{
				windowHeight:0,
				keyword:'',
				role:'',
				roleUrl: '',
				needAdapt:false,
				dataList:[],
				page:1,
				count:0,//总数
				
				keyword:'',
				
				no_data:getApp().globalData.baseImageUrl+'/no-data.png',
			}
		},
		onLoad() {
			let _this = this
			app = getApp()
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			if(_this.needAdapt){
				_this.windowHeight = (app.globalData.windowHeight -88)*2 + 'rpx'
			}else{
				_this.windowHeight = (app.globalData.windowHeight -54)*2 + 'rpx'
			}
			
		},
		onShow() {
			this.dataList = []
			this.page=1
			this.getList()
		},
		onPullDownRefresh() {
			this.dataList = []
			this.page=1
			this.getList()
		},
		onReachBottom() {
			if(this.dataList.length===this.count){
				uni.showToast({
					title:'暂无更多数据',
					icon:"none"
				})
			}else{
				this.page = this.page+1
				this.getList()
			}
		},
		mounted() {
			
		},
		methods:{
			searchPeople(val){
				this.dataList = []
				this.page=1
				this.getList()
			},
			
			async getList(){
				let _this = this
				let parmas={
					page:_this.page,
					size:10,
					keyword:_this.keyword
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/customer/list`,
					data: parmas,
					method:'POST',//默认是GET
				})
				console.log('关联',res)
				if(res.data.code==200){
					_this.count = res.data.data.count
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						_this.dataList.push(list[i])
					}
					
				}
			},
			
			/**
			 * 去详情
			 */
			clickCustomer(val){
				let itemId = val.id
				uni.navigateTo({
					url:'./linkMsg?itemId='+itemId+'&tag=edit'
				})
			},
			
			/**
			 * 新增
			 */
			addit(){
				uni.navigateTo({
					url:'./linkMsg?tag=add'
				})
			},
			
			
		},
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>

<style scoped lang="scss">
	.top{
		position: fixed;
		top: 0;
		background-color: #ffffff;
		width: 100%;
	}
	.searchview{
		height: 64rpx;
		width: 686rpx;
		background: #F7F7F7;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
	}
	.placeholder-view{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 8rpx;
	}
	.ttext1{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	
	.item{
		height: 126rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx #eeeeee solid;
	}
	.item-title{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.item-title2{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 8rpx;
	}
	
	
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	.view-bottom-b{
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}
</style>